<template>
  <ul class="appTab">
    <li v-for="(item,index) in tabList" :key="index" :class="{active:checkIndex == index}" @click="tab(index,item)">{{item.name}}</li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex';
export default {
  setup(props,{emit}) {
    const store = useStore();
    const data = reactive({
      tabList: [
        { name: "全部", val: "all" },
        { name: "精华", val: "good" },
        { name: "分享", val: "share" },
        { name: "问答", val: "ask" },
        { name: "招聘", val: "job" },
        { name: "客户端测试", val: "" },
      ],
      checkIndex: computed(() => store.state.checkIndex), // 选中的索引
    });
    const tab = (i,value) => { // 切换函数
       store.commit('storeTab',{i:i,val:value.val});
       emit('tab',value.val);
    }
    return {
      ...toRefs(data),
      tab
    };
  },
};
</script>
<style lang="scss" scoped>
   .appTab{
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: space-around;
     li{
       padding: 4px 8px;
       border-radius: 5px;
       color: chartreuse;
       font-size: 14px;
     }
     .active{
       color: #fff;
       background: chartreuse;
     }
   }
</style>